<template>
	<div class="application-section scope">
		<window v-for="app in apps" :key="app.id" :setting="app"></window>
	</div>
	<div class="taskbar-section scope">
		<div class="dog-start">
			<div class="dog-icons" @click="onStart"></div>
		</div>
		<div class="task-list">
			<div class="task-item" :class="{ actived: task.focus }" v-for="task in tasklist" :key="task.id"
				@click="onClick(task.id)" :style="{ width: itemWidth + 'px' }">
				<span class="icon" :class="task.icon"></span>
				{{ task.title }}
			</div>
		</div>
		<div class="dog-tool">
			<div class="dog-task-icon" @click="onDisplay"><DsIcon icon="screen" :width="20" :height="20"></DsIcon></div>
			<div class="dog-task-icon" @click="onSidebar"><DsIcon icon="bubble" :width="20" :height="20"></DsIcon></div>
		</div>
		<transition enter-active-class="enterAnimation" leave-active-class="leaveAnimation">
			<div class="dog-menu" v-show="showmenu">
				<div class="dog-menu-list dogstar-scroll">
					<ul>
						<!-- <li class="dog-menu-title">应用列表</li> -->
						<li v-for="item in data.menulist" :key="item.id">
							<div class="menu-item" @click="onClickItem(item)">
								<i class="icon" :class="item.icon"></i>
								<span>{{ item.name }}</span>
							</div>
							<ul v-if="item.sublist" v-show="!item.subhidden">
								<li v-for="sub in item.sublist" :key="sub.id">
									<div class="menu-item" style="margin-left: 20px ;text-align:left"
										@click="onClickItem(sub)">
										<i class="icon" :class="sub.icon"></i>
										<span>{{ sub.name }}</span>
									</div>
								</li>
							</ul>
						</li>
					</ul>
				</div>
				<div class="dog-menu-links">
					<ul>
						<li><a href="#" @click="onLink('0000')"><span>关于</span></a></li>
						<li><a href="#" @click="onLink('9999')"><span>使用帮助</span></a></li>
						<li><a href="#" @click="onLink('0001')"><span>设置</span></a></li>
						<li><a href="#" @click="onLink('0002')"><span>计算器</span></a></li>
						<li><a href="#" @click="lockScreen()"><span>锁屏</span></a></li>
					</ul>
				</div>
			</div>
		</transition>
	</div>
</template>

<script setup>
	import {reactive,defineProps,defineEmits,onMounted,	computed} from 'vue';
	import DsIcon from '@/components/DsIcon.vue'
	import RouterUtil from '@/utils/RouterUtil.js';
	import Window from './Window.vue';
	import REGISTER from '../register/index.js'
	import coreStore from '../stores/core.js';
	const $coreStore = coreStore();
	
	const data = reactive({
		menulist: []
	});

	onMounted(() => {
		REGISTER.application.forEach(item => {
			let object = {};
			if (item.sublist) {
				object.sublist = [];
				item.sublist.forEach(o => {
					let sub = {};
					sub.id = o.id;
					sub.name = o.name;
					sub.icon = o.icon;
					object.sublist.push(sub);
				});
				object.subhidden = true;
			}
			object.id = item.id;
			object.name = item.name;
			object.icon = item.icon;
			data.menulist.push(object);
		});
	});
	const apps = computed(() => {
		let apps = [];
		if ($coreStore.tasks.length > 0) {
			$coreStore.tasks.forEach(app => {
				if (app != null) {
					apps.push(app);
				}
			});
			return apps.sort((a, b) => {
				return a.date - b.date;
			});
		} else {
			return [];
		}
	});
	const tasklist = computed(() => {
		let tasks = [];
		$coreStore.tasks.forEach((task, index) => {
			if (task != null) {
				if (index == 0 && task.min == false) {
					task.focus = true
				} else {
					task.focus = false
				}
				tasks.push(task);
			}
		});
		return tasks.sort((a, b) => {
			return a.date - b.date
		});
	});
	const itemWidth = computed(() => {
		if ($coreStore.tasks.length < 5) {
			return 100;
		} else {
			let ww = document.body.clientWidth * 0.95;
			return Math.floor(ww / $coreStore.tasks.length);
		}
	});
	
	const showmenu = computed(() => {
		return $coreStore.startMenu;
	});

	const onClickItem = function(object) {
		if (object.sublist) {
			object.subhidden = !object.subhidden;
		} else {
			$coreStore.openApplication(object.id);
			$coreStore.selectIcon('');
		}
	};
	const onLink = function(id) {
		$coreStore.openApplication(id);
		$coreStore.selectIcon('');
	};
	const onClick = function(id) {
		$coreStore.applicationMinSwitch(id);
	};
	const onStart = function() {
		$coreStore.openMenu();
	};
	const onSidebar = function() {
		$coreStore.switchSidebar();
	};
	const onDisplay = function() {
		$coreStore.openApplication('0001');
	}
	const lockScreen = function() {
		RouterUtil.quit();
	}
</script>

<style lang="less" scoped>
	@import '../global.less';

	.taskbar-section {
		width: 100%;
		height: var(--task-bar-heihgt,1rem);
		background: var(--theme-color,rgba(0,170,255,1));
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
		position: fixed;
		bottom: 0;
		top: auto !important;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dog-start {
		width:5%;
		min-width: 60px;
		margin: 0 auto;
		height: var(--task-bar-heihgt,1rem);
	}

	.dog-tool {
		width:10%;
		min-width: 40px;
		margin: 0 auto;
		height: var(--task-bar-heihgt,1rem);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dog-task-icon {
		height: 100%;
		padding: 10px 10px;
		display: inline-block;
	}

	.dog-task-icon:hover {
		background-color: #cfe3fd;
	}

	.task-list {
		flex:1;
		min-width: 80%; //calc(100% - 100px);
		overflow: hidden;
		height: var(--task-bar-heihgt,1rem);
		cursor: default;

		.task-item {
			float: left;
			height: var(--task-bar-heihgt,1rem);
			max-width: 120px;
			min-width: 20px;
			padding: 0 20px 0 15px;
			text-align: center;
			line-height: var(--task-bar-heihgt,1rem);
			font-size: 14px;
			border-right: 1px solid #e9e9e9;
			color: rgba(117, 117, 117, 0.8);

			&.actived {
				color: rgba(17, 17, 17, 1);
				background: rgba(255, 255, 255, 1);
			}

			.icon {
				display: inline-block;
				width: 25px;
				height: 25px;
				margin-right: 5px;
				background-size: cover;
				vertical-align: top;
				position: relative;
				top: 7px;
			}
		}
	}

	.dog-icons {
		padding: 0;
		list-style: none;
		margin: 1em;
		display: inline-block;
		margin: 0.15em;
		position: relative;
		font-size: 1.2em;
		background-image:url(../assets/icon/cat2.png);
		background-position: center center;
		background-repeat:no-repeat;
		background-size: cover;
		width: 2.2rem;
		height: 2.2rem;
		transition: all 265ms ease-out;
	}
	
	.dog-icons:hover {
		background-image:url(../assets/icon/cat1.png);
		//animation: heartBeat 1s;
	}
	
	.dog-icons:active {
		animation: heartBeat 1s;
	}
	
	.dog-menu {
		bottom: var(--task-bar-heihgt,1rem);
		left: 0px;
		overflow: visible;
		display: inline-block;
		min-width: 450px;
		border-radius: 5px;
		position: fixed;
		box-shadow: 0 0 10px rgba(12, 67, 101, 0.8);
		opacity: 0.9;
		background: var(--theme-color);

		ul {
			list-style: none;
		}

		.icon {
			display: inline-block;
			height: 18px;
			width: 18px;
			background-size: cover;
			margin-right: 5px;
		}
	}

	.dog-menu-list {
		width: 50%;
		float: left;
		background: #fff;
		border: solid 1px #365167;
		margin: 7px 0 7px 7px;
		box-shadow: 0 0 1px #fff;
		-moz-box-shadow: 0 0 1px #fff;
		-webkit-box-shadow: 0 0 1px #fff;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		max-height: 400px;
		overflow-y: auto;

		.menu-item {
			border: solid 1px transparent;
			display: flex;
			flex-wrap: nowrap;
			flex-direction:row;
			justify-content:start;
			align-items: center;
			padding: 3px;
			margin: 3px;
			color: #4b4b4b;
			font-size: 1.0rem;
		}

		.menu-item:hover {
			border: solid 1px #7da2ce;
			border-radius: 3px;
			box-shadow: inset 0 0 1px #fff;
			background-color: #cfe3fd;
		}

		a img {
			border: 0;
			vertical-align: middle;
			margin: 0 5px 0 0;
		}
	}
	.dog-menu-title {
		font-size: 1.2rem;
		text-align: center;
	}
	.dog-menu-links {
		width: 45%;
		float: right;
		margin: 5px;

		li.icon {
			text-align: center;
		}

		a {
			border: solid 1px transparent;
			display: block;
			margin: 5px 0;
			position: relative;
			color: #fff;
			text-decoration: none;
			min-width: 120px;
		}

		a:hover {
			border: solid 1px #7da2ce;
			border-radius: 3px;
			box-shadow: inset 0 0 1px #fff;
			background-color: rgba(207,227,253,0.7);
		}

		a span {
			padding: 5px;
			display: block;
		}
	}
	
.leaveAnimation {
  animation: slideOutLeft 0.9s;
}
.enterAnimation {
  animation: slideInLeft 0.3s;
}
</style>